import React, { useEffect, useState } from 'react';
import '../style/Register.scss';
import { user_register, role_list } from "../utils/api"
import { Button, Form, Input, Select, notification } from 'antd';
import { SmileOutlined, ExclamationCircleOutlined } from "@ant-design/icons"
import { useNavigate } from 'react-router-dom';
// import { useAuthregister } from '../hooks/Authoritymanage'
const { Option } = Select;

const formItemLayout = {
    labelCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 8,
        },
    },
    wrapperCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 16,
        },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};
function Register(props) {
    // var [roleid, setRoleid] = useAuthregister();
    var [roleid, setRoleid] = useState([]);
    useEffect(() => {
        role_list().then((res) => {
            setRoleid(res.data.list)
        });
    }, [])
    // useEffect(() => {
    //     console.log(roleid)
    // }, [roleid])

    var navigate = useNavigate();
    const [form] = Form.useForm();
    const onFinish = (values) => {
        console.log(values);
        user_register(values).then((res) => {
            // console.log(values);
            console.log(res.data)
            if (res.data.code == 200) {
                notification.success({
                    message: res.data.msg,
                    duration: 1.5,
                    icon: <SmileOutlined />
                });
                navigate('/login');
            } else if (res.data.code == 400) {
                notification.error({
                    message: res.data.msg,
                    duration: 1.5,
                    icon: <ExclamationCircleOutlined />
                })
                form.setFieldsValue({ phone: "", role: "" })
            }
            // console.log(res.data);
        })
        // console.log('Received values of form: ', values);

    };

    const [autoCompleteResult, setAutoCompleteResult] = useState([]);
    const onWebsiteChange = (value) => {
        if (!value) {
            setAutoCompleteResult([]);
        } else {
            setAutoCompleteResult(['.com', '.org', '.net'].map((domain) => `${value}${domain}`));
        }
    };
    var tologin = () => {
        navigate('/login');
    }
    return (
        <div className='register'>
            <div className="box">
                <Form
                    {...formItemLayout}
                    form={form}
                    name="Register"
                    onFinish={onFinish}

                    scrollToFirstError
                >
                    <h4>系统注册</h4>
                    <Form.Item
                        name="user"
                        label="账号"
                        rules={[
                            {
                                type: 'text',
                                message: 'The input is not valid user!',
                            },

                            {
                                required: true,
                                message: 'Please input your user!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>


                    <Form.Item
                        name="name"
                        label="姓名"
                        tooltip="What do you want others to call you?"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your name!',

                            },
                            {
                                validator: (rule, value) => {
                                    let reg = new RegExp(/^(?:[\u4e00-\u9fa5·]{2,16})$/);
                                    if (reg.test(value) == false) {
                                        return Promise.reject('姓名至少2位且是中文');
                                    } else {
                                        return Promise.resolve();
                                    }
                                }
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        name="phone"
                        label="手机号"
                        rules={[
                            {
                                // type: 'number',
                                required: true,
                                message: 'Please input your phone number!',
                            },
                            {
                                validator: (rule, value) => {
                                    let reg = new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/);
                                    if (reg.test(value) == false) {
                                        return Promise.reject('手机号不合规范');
                                    } else {
                                        return Promise.resolve();
                                    }
                                }
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>


                    <Form.Item
                        name="email"
                        label="邮箱"
                        rules={[
                            {
                                // type: 'number',
                                required: true,
                                message: 'Please input your phone number!',
                            },
                            {
                                validator: (rule, value) => {
                                    let reg = new RegExp(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
                                    if (reg.test(value) == false) {
                                        return Promise.reject('请输入正确的邮箱格式');
                                    } else {
                                        return Promise.resolve();
                                    }
                                }
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>



                    <Form.Item
                        name="role"
                        label="角色"
                        rules={[
                            {
                                required: true,
                                message: 'Please select role!',
                            },
                        ]}
                    >
                        <Select placeholder="选择角色">
                            {console.log(roleid)}
                            {
                                roleid.map((item, index) => {
                                    return (

                                        <Option key={index} value={item._id}>{item.name}</Option>

                                    )
                                })
                            }
                        </Select>
                    </Form.Item>


                    <Form.Item className='mybutton' >
                        <Button type="primary" htmlType="submit">
                            注册
                        </Button>
                        <Button className='tologin' onClick={tologin}>登录</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Register;